<template>
	<view class="bankcard">
		<view class="flex bankcard_item">
			<view>所属银行</view>
			<input class="backcard_input" v-model="formData.bankName" placeholder-class="placeholder" placeholder="请输入银行" />
		</view>
		<view class="flex bankcard_item">
			<view>银行卡号</view>
			<input class="backcard_input" v-model="formData.cardId" placeholder-class="placeholder" placeholder="请输入银行卡号" />
		</view>
		<view class="flex bankcard_item">
			<view>开户行</view>
			<input class="backcard_input" v-model="formData.bankAddress" placeholder-class="placeholder" placeholder="请输入开户行" />
		</view>
		<view class="bankcard_add" @click="bankcardFn">提交</view>
	</view>
</template>

<script setup>
	import { computed ,ref,reactive,toRefs,onMounted} from 'vue';
	import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	
	const formData=ref({
		cardId:'',
		bankName:'',
		bankAddress:''
	})

	const bankcardFn=()=>{
       console.log(formData.value);
	   if(formData.value.cardId &&formData.value.bankName && formData.value.bankAddress ){
		   console.log('23');
		   sheep.$api.login.bankcard(formData.value).then(res=>{
			   console.log(res);
			  
		   })
		   
		   setTimeout(()=>{
			   sheep.$store('user').getUserInfo()
			   uni.navigateBack({delta:1})
		   },1000)
	   }else{
		   uni.showToast({
			   title:'请填写完整',
			   icon:'none'
		   })
	   }
	}
	
</script>

<style lang="scss" scoped>
	page{
		padding-top:30rpx;
	}
	.flex{
		display:flex;
		align-items: center;
	}
	.bankcard{
		margin: 0 30rpx;
		padding:20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 30rpx;
	}
	.placeholder{
		font-size: 28rpx;
	}
	.backcard_input{
		padding: 10rpx 20rpx;
		border: 2rpx solid #eee;
		margin-left: 20rpx;
		border-radius: 8rpx;
	}
	.bankcard_item{
		margin-bottom: 30rpx;
	}
	
	.bankcard_add{
		margin-top: 100rpx;
		margin-bottom: 50rpx;
		padding:20rpx;
		border-radius: 20rpx;
		color:#fff;
		background-color: #f8b8c8;
		text-align: center;
	}
</style>